<%--
  Created by IntelliJ IDEA.
  User: yyf19
  Date: 2019/6/14
  Time: 17:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>购物车</title>
    <%@ include file="/WEB-INF/jsp/include/head.jsp" %>
</head>
<body>
<div>
    <%@ include file="/WEB-INF/jsp/include/nav.jsp" %>
</div>
<div class="container" id="product-box">

    <%--<hr/>--%>

    <table class="table table-bordered" id="myTable">
        <tr>
            <th>图片</th>
            <th>名称</th>
            <th>价格</th>
            <th>数量</th>
            <%--<th>状态</th>--%>
            <th>是否选中</th>
            <th>操作</th>
        </tr>
    </table>
    <div style="clear: both">
        <h2 style="float: left">总价:</h2>
        <h2 id="total-price" style="color: red;float: left;"></h2>
    </div>
    <div style="float: right">
        <button type="button" class="btn btn-default" onclick="clearAll()">清空购物车</button>
        <a type="button" class="btn btn-warning" href="${serverApp}/user/${SESSION_USER.id}/cart/toSubmit">确认订单</a>
    </div>

</div>

</body>
<%@ include file="/WEB-INF/jsp/include/bodyfoot.jsp" %>
<script>
    var url = serverApp + "/user/${SESSION_USER.id}/cart/listDetail";
    var trs = ""
    var total = 0;
    var postage = 0;
    var product;
    $GET(url, function (result) {
        // var total = 0;
        product = result;
        console.log(result)
        for (var i = 0; i < result.length; i++) {
            // total += result[i].price * result[i].quantity
            trs += '<tr>'
            trs += '<td><a href="' + serverApp + '/product/toGet/' + result[i].productId + '" class="thumbnail main-image-box-80-80" ><img src="' + result[i].mainImage + '" alt="..."> </a></td>'
            trs += '<td>' + result[i].name + '</td>'
            trs += '<td>' + result[i].price + '</td>'
            trs += '<td>' + result[i].quantity + '</td>'
            // trs += '<td>' + result[i].status + '</td>'
            if (result[i].checked == 1) {
                trs += '<td><input type="checkbox"  checked="checked" data-id="' + result[i].id + '" onclick="doChecked(this)"/></td>'
            } else {
                trs += '<td><input type="checkbox"  data-id="' + result[i].id + '" onclick="doChecked(this)"/></td>'
            }

            trs += '<td><button class="btn btn-danger" data-id="' + result[i].id + '" onclick="doDelete(this)">删除</button></td>'
            trs += '</tr>'
        }

        var $myTable = $("#myTable");
        $myTable.append(trs)
        calTotal();
    })

    function clearAll() {
        var url = serverApp + "/user/${SESSION_USER.id}/cart/deleteAll";
        $GET(url, function (result) {
            console.log(result)
            window.location.href = window.location.href
        })
    }


    function doChecked(mythis) {
        var url = serverApp + "/user/${SESSION_USER.id}/cart/check";
        $this = $(mythis)
        console.log($this.is(":checked"))
        console.log($this.attr("data-id"))
        var id = $this.attr("data-id");
        var checked = 0;
        if ($this.is(":checked")) {
            checked = 1
        }
        var data = {
            id: id,
            checked: checked
        }
        $POST_JSON(url, data, function (e) {
            window.location.href = window.location.href
        })
    }

    function doDelete(mythis) {
        var url = serverApp + "/user/${SESSION_USER.id}/cart/delete";
        $this = $(mythis)
        var id = $this.attr("data-id");
        var data = {
            id: id
        }
        $POST_JSON(url, data, function (e) {
            window.location.href = window.location.href
        })
    }

    function calTotal() {
        total=0;
        for(var i=0;i<product.length;i++){
            if(product[i].checked == 1){
                total += product[i].price * product[i].quantity
            }
        }
        total += postage;
        $("#total-price").html('￥' + total);
    }



</script>
</html>
